@use './variables.scss' as *;
.layout-aside-main {
  /**
    用于左边是aside，右边是main的布局
    用在el-aside标签上
     */
  .page-aside {
    width: 200px;
    height: $main-content-height;
    background-color: $page-aside-background-color;
    margin-right: $page-aside-margin-right;
    padding: $main-content-padding;
    .el-tree {
      background-color: transparent;
    }
  }

  /**
    用于左边是aside，右边是main的布局，也可用在单独的el-main上
    用在el-main标签上
     */
  .page-main {
    padding: $main-content-padding;
    // height: $main-content-height;
    background-color: $main-content-background-color;
    display: flex;
    flex-direction: column;
    & > .com-operation-row {
      margin-bottom: 12px;
    }
  }
}

.layout-double-table {
  .content {
    height: 100%;
    background-color: $main-content-background-color;
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
    & > .com-operation-row {
      margin-bottom: 12px;
    }
  }
  & > * {
    height: $main-content-height;
  }
  & > *:first-child {
    padding-right: 6px;
  }
  & > *:last-child {
    padding-left: 6px;
  }
}
.layout-double-table-has-header {
  & > .com-operation-row {
    width: 100%;
    margin-bottom: 12px;
    padding: 12px;
    background-color: $main-content-background-color;
  }
  .content {
    height: $main--header-content-height;
    background-color: $main-content-background-color;
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
    & > .com-operation-row {
      margin-bottom: 12px;
    }
  }
  .layout-double-table-body {
    width: 100%;
  }
  .layout-double-table-body > *:first-child {
    padding-right: 6px;
  }
}
